<template>
  <div>
    <Navbar />
    <h1>数据表格示例</h1>
    <el-button @click="handleAdd">添加数据</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button @click="handleEdit(row)">编辑</el-button>
          <el-button @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />

    <el-dialog v-model:visible="dialogVisible" title="编辑数据">
      <el-form :model="editForm">
        <el-form-item label="日期">
          <el-input v-model="editForm.date"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveData">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Navbar from '@/components/Navbar.vue'

// 生成更多的静态数据
const generateData = () => {
  const data = []
  for (let i = 1; i <= 100; i++) {
    data.push({
      date: `2016-05-0${(i % 10) + 1}`,
      name: `User ${i}`,
      address: `No. ${i * 10}, Someplace, Somecity`
    })
  }
  return data
}

let mockData = generateData()

const total = mockData.length
const currentPage = ref(1)
const pageSize = ref(10)
const tableData = ref([])

const dialogVisible = ref(false)
const editForm = ref({
  date: '',
  name: '',
  address: ''
})
let currentRow = null

const paginateData = () => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  tableData.value = mockData.slice(start, end)
}

paginateData()

const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  paginateData()
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  paginateData()
}

const handleAdd = () => {
  currentRow = null
  editForm.value = { date: '', name: '', address: '' }
  dialogVisible.value = true
}

const handleEdit = (row) => {
  currentRow = row
  editForm.value = { ...row }
  dialogVisible.value = true
}

const handleDelete = (row) => {
  mockData = mockData.filter((item) => item !== row)
  paginateData()
}

const saveData = () => {
  if (currentRow) {
    Object.assign(currentRow, editForm.value)
  } else {
    mockData.push({ ...editForm.value })
    total.value = mockData.length
  }
  dialogVisible.value = false
  paginateData()
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 500px;
}

.el-table__column--actions {
  display: flex;
  justify-content: space-around;
}
</style>
